<template>
  <Popup
      :round="round"
      v-model="visible"
      @click-overlay="handleClose"
      overlay-class="layer_wrap"
      :transition-appear="true"
      :close-on-popstate="true"
      :safe-area-inset-bottom="true"
      :close-on-click-overlay="false"
      :style="getStyle('popup')"
      :overlay-style="getStyle('overlay')"
  >
    <div class="surgery_patient">
      <div class="sign-area">消息播报</div>
      <div class="surgery_patient_inside" v-html="info?.data?.treatingMsg || ''"/>
    </div>
  </Popup>
</template>

<script>
import {Popup} from 'vant';

export default {
  name: 'SurgeryPatient',
  componentName: "SurgeryPatient",
  props: {
    visible: {
      type: Boolean,
      required: false
    },
    info: {
      type: Object,
      required: true
    }
  },

  components: {
    Popup,
  },

  data() {
    return {
      round: true,
    }
  },

  computed: {
    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let {popupBackground, overlayBackground} = (self.info) || Array();
        let Obj = Object();
        switch (val) {
          case 'popup':
            Reflect.set(Obj, 'backgroundColor', (popupBackground || `rgba(255, 255, 255, 1)`));
            return Obj;
          case 'overlay':
            Reflect.set(Obj, 'backgroundColor', (overlayBackground || `rgba(0, 0, 0, 0.6)`));
            return Obj;
        }
      }
    },
  },

  mounted() {
  },

  methods: {
    handleClose() {
      this.$emit('handleCancel');
    }
  },

}
</script>

<style lang="scss" scoped>
@import "./assets/style";
</style>
